﻿<div class="sample_title">Chart - Line</div>

sample:<br />
<div class="sample_preview">
    <script type="text/javascript"><!--//--><![CDATA[//><!--

        function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 5,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#fee',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }
        
        $(document).ready(function() {

            var datasets = {
                "usa": {
                    label: "USA",
                    data: [[1988, 4839], [1989, 4790], [1990, 4576], [1991, 4019], [1992, 4247], [1993, 4023], [1994, 3778], [1995, 3582], [1996, 3346], [1997, 3365], [1998, 3281], [1999, 3291], [2000, 3412], [2001, 3449], [2002, 3303], [2003, 4408], [2004, 4804], [2005, 5046], [2006, 5286]]
                },
                "russia": {
                    label: "Russia",
                    data: [[1988, 2180], [1989, 2030], [1990, 17100], [1992, 42500], [1993, 37600], [1994, 3600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]]
                },
                "uk": {
                    label: "UK",
                    data: [[1988, 62982], [1989, 62027], [1990, 60696], [1991, 62348], [1992, 58560], [1993, 56393], [1994, 54579], [1995, 50818], [1996, 50554], [1997, 48276], [1998, 47691], [1999, 47529], [2000, 47778], [2001, 48760], [2002, 50949], [2003, 57452], [2004, 60234], [2005, 60076], [2006, 59213]]
                },
                "germany": {
                    label: "Germany",
                    data: [[1988, 55627], [1989, 55475], [1990, 58464], [1991, 55134], [1992, 52436], [1993, 47139], [1994, 43962], [1995, 43238], [1996, 42395], [1997, 40854], [1998, 40993], [1999, 41822], [2000, 41147], [2001, 40474], [2002, 40604], [2003, 40044], [2004, 38816], [2005, 38060], [2006, 36984]]
                },
                "denmark": {
                    label: "Denmark",
                    data: [[1988, 3813], [1989, 3719], [1990, 3722], [1991, 3789], [1992, 3720], [1993, 3730], [1994, 3636], [1995, 3598], [1996, 3610], [1997, 3655], [1998, 3695], [1999, 3673], [2000, 3553], [2001, 3774], [2002, 3728], [2003, 3618], [2004, 3638], [2005, 3467], [2006, 3770]]
                },
                "sweden": {
                    label: "Sweden",
                    data: [[1988, 6402], [1989, 6474], [1990, 6605], [1991, 6209], [1992, 6035], [1993, 6020], [1994, 6000], [1995, 6018], [1996, 3958], [1997, 5780], [1998, 5954], [1999, 6178], [2000, 6411], [2001, 5993], [2002, 5833], [2003, 5791], [2004, 5450], [2005, 5521], [2006, 5271]]
                },
                "norway": {
                    label: "Norway",
                    data: [[1988, 4382], [1989, 4498], [1990, 4535], [1991, 4398], [1992, 4766], [1993, 4441], [1994, 4670], [1995, 4217], [1996, 4275], [1997, 4203], [1998, 4482], [1999, 4506], [2000, 4358], [2001, 4385], [2002, 5269], [2003, 5066], [2004, 5194], [2005, 4887], [2006, 4891]]
                }
            };
            var data = [];

            for (key in datasets) {
                data.push(datasets[key]);
            }

            $.plot($("#api_placeholder"), data,
            {
                //crosshair: { mode: "x" },
                grid: {
                    backgroundColor: { colors: ["#fff", "#eee"] },
                    autoHighlight: true,
                    clickable: true,
                    hoverable: true 
                },
                series: {
                    lines: { show: true },
                    points: { show: false }
                },
                legend: { position: 'se' }
            });

            var previousPoint = null;
            $("#api_placeholder").bind("plothover", function(event, pos, item) {
                $("#x").text(pos.x.toFixed(2));
                $("#y").text(pos.y.toFixed(2));

                //if ($("#enableTooltip:checked").length > 0) {
                    if (item) {
                        if (previousPoint != item.dataIndex) {
                            previousPoint = item.dataIndex;

                            $("#tooltip").remove();
                            var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);

                            showTooltip(item.pageX, item.pageY,
                                item.series.label + " of " + x + " = " + y);
                        }
                    }
                    else {
                        $("#tooltip").remove();
                        previousPoint = null;
                    }
                //}
            });

        });
    //--><!]]></script>
    
    <div id="api_placeholder" style="width:600px;height:300px;"></div>
    (<span id="x">0</span>, <span id="y">0</span>)
</div><br />
code:
<div class="sample_code" rel="brush: js; html-script: false;">
    &lt;script type="text/javascript"&gt
        function showTooltip(x, y, contents) {
            $('&lt;div id="tooltip"&gt;' + contents + '&lt;/div&gt;>').css({
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 5,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#fee',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }
        
        $(document).ready(function() {

            var datasets = {
                "usa": {
                    label: "USA",
                    data: [[1988, 4839], [1989, 4790], [1990, 4576], [1991, 4019], [1992, 4247], [1993, 4023], [1994, 3778], [1995, 3582], [1996, 3346], [1997, 3365], [1998, 3281], [1999, 3291], [2000, 3412], [2001, 3449], [2002, 3303], [2003, 4408], [2004, 4804], [2005, 5046], [2006, 5286]]
                },
                "russia": {
                    label: "Russia",
                    data: [[1988, 2180], [1989, 2030], [1990, 17100], [1992, 42500], [1993, 37600], [1994, 3600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]]
                },
                "uk": {
                    label: "UK",
                    data: [[1988, 62982], [1989, 62027], [1990, 60696], [1991, 62348], [1992, 58560], [1993, 56393], [1994, 54579], [1995, 50818], [1996, 50554], [1997, 48276], [1998, 47691], [1999, 47529], [2000, 47778], [2001, 48760], [2002, 50949], [2003, 57452], [2004, 60234], [2005, 60076], [2006, 59213]]
                },
                "germany": {
                    label: "Germany",
                    data: [[1988, 55627], [1989, 55475], [1990, 58464], [1991, 55134], [1992, 52436], [1993, 47139], [1994, 43962], [1995, 43238], [1996, 42395], [1997, 40854], [1998, 40993], [1999, 41822], [2000, 41147], [2001, 40474], [2002, 40604], [2003, 40044], [2004, 38816], [2005, 38060], [2006, 36984]]
                },
                "denmark": {
                    label: "Denmark",
                    data: [[1988, 3813], [1989, 3719], [1990, 3722], [1991, 3789], [1992, 3720], [1993, 3730], [1994, 3636], [1995, 3598], [1996, 3610], [1997, 3655], [1998, 3695], [1999, 3673], [2000, 3553], [2001, 3774], [2002, 3728], [2003, 3618], [2004, 3638], [2005, 3467], [2006, 3770]]
                },
                "sweden": {
                    label: "Sweden",
                    data: [[1988, 6402], [1989, 6474], [1990, 6605], [1991, 6209], [1992, 6035], [1993, 6020], [1994, 6000], [1995, 6018], [1996, 3958], [1997, 5780], [1998, 5954], [1999, 6178], [2000, 6411], [2001, 5993], [2002, 5833], [2003, 5791], [2004, 5450], [2005, 5521], [2006, 5271]]
                },
                "norway": {
                    label: "Norway",
                    data: [[1988, 4382], [1989, 4498], [1990, 4535], [1991, 4398], [1992, 4766], [1993, 4441], [1994, 4670], [1995, 4217], [1996, 4275], [1997, 4203], [1998, 4482], [1999, 4506], [2000, 4358], [2001, 4385], [2002, 5269], [2003, 5066], [2004, 5194], [2005, 4887], [2006, 4891]]
                }
            };
            var data = [];

            for (key in datasets) {
                data.push(datasets[key]);
            }

            $.plot($("#api_placeholder"), data,
            {
                //crosshair: { mode: "x" },
                grid: {
                    backgroundColor: { colors: ["#fff", "#eee"] },
                    autoHighlight: true,
                    clickable: true,
                    hoverable: true 
                },
                series: {
                    lines: { show: true },
                    points: { show: false }
                },
                legend: { position: 'se' }
            });

            var previousPoint = null;
            $("#api_placeholder").bind("plothover", function(event, pos, item) {
                $("#x").text(pos.x.toFixed(2));
                $("#y").text(pos.y.toFixed(2));

                //if ($("#enableTooltip:checked").length > 0) {
                    if (item) {
                        if (previousPoint != item.dataIndex) {
                            previousPoint = item.dataIndex;

                            $("#tooltip").remove();
                            var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);

                            showTooltip(item.pageX, item.pageY,
                                item.series.label + " of " + x + " = " + y);
                        }
                    }
                    else {
                        $("#tooltip").remove();
                        previousPoint = null;
                    }
                //}
            });

        });
    &lt;/script&gt;
        
    &lt;div id="placeholder" style="width:600px;height:300px;"&gt;&lt;/div&gt;
    (&lt;span id="x"&gt;0&lt;/span&gt;, &lt;span id="y"&gt;0&lt;/span&gt;)
    <% for (int i = 0, max_i = 67; i < max_i; i++) { Response.Write("<br />"); } %>
</div>